<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">{{index}}-{{item.username}}-<button @click="onEdit(item)">编辑</button></li>
        </ul>
        <my-dialog :item="currentItem"></my-dialog>
    </div>
    <script>
Vue.component('my-dialog',{
    props: {
        item: {
            type:Object,
            required: true
        }
    },
    template: `<div>对话框</div>`,
    mounted() {
        console.log(this.item)
    },
    watch: {
        item:{
            handler(item){
                console.log('item',item)
            },
            deep: true
        }
    }
})
new Vue({
    el: '#app',
    data(){
        return {
            list: [
                {username: 'zs', age: 20},
                {username: 'ls', age: 30},
            ],
            currentItem: {}
        }
    },
    methods: {
        onEdit(item){
            this.currentItem = item
        }
    },
})
    </script>
</body>
</html>